<template>
    <div class="reportmian">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="数据筛选" name="1">
                <el-form :inline="true" class="divstyle" :model="selectfrom">
                    <el-form-item label="汽车">
                        <el-select filterable placeholder="请选择哪辆汽车" v-model="selectfrom.CardsId">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllVehicle" :label="v.CareName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目">
                        <el-select filterable placeholder="请选择项目" v-model="selectfrom.Project">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="selectfrom.Start"
                                        type="date"
                                        placeholder="开始时间"
                                        value-format="yyyy-MM-dd"
                                        format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="selectfrom.End"
                                        type="date"
                                        placeholder="结束时间"
                                        value-format="yyyy-MM-dd"
                                        format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-search" @click="formdata"></el-button>
                        <el-button type="success" icon="el-icon-printer" v-print="printObj">打印</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="数据面板" name="2">
                <el-row>
                    <el-col align="center" style="font-size: 25px;font-weight: bold;">固远晨通科技发展有限公司油卡使用记录汇总表</el-col>
                    <el-col>
                        <el-table id="wrapperGasolineRecordReport" :data="tableData" border show-summary>
                            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                            <el-table-column label="车辆品牌" align="center">
                                <template slot-scope="slot">
                                    {{ slot.row.GasCardsName }}
                                </template>
                            </el-table-column>
                            <el-table-column label="充值时间" align="center">
                                <template slot-scope="slot">
                                    {{ slot.row.RecordDate  }}
                                </template>
                            </el-table-column>
                            <el-table-column label="充值金额" align="center">
                                <template slot-scope="slot">
                                    {{ slot.row.TopUpRecord   }}
                                </template>
                            </el-table-column>
                            <el-table-column label="所在项目" align="center">
                                <template slot-scope="slot">
                                    {{ slot.row.ProjectName   }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="数据报表" name="3">
                <div id="EchartData">
                    <div class="pie">
                        <div class="pieData" id="leftData"></div>
                        <div class="pieData" id="rightData"></div>
                    </div>
                    <div class="bar" id="downData"></div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";
    import Echatrs from "echarts";

    export default {
        name: "GasolineRecordReport",
        props: {
            AllVehicle: {
                type: Array,
                required: true,
            },
            AllProject: {
                type: Array,
                required: true
            },
        },
        data() {
            return {
                activeNames: ['1', '2', '3'],
                selectfrom: {
                    Start: new Date(),
                    End: new Date(),
                    CardsId: 0,
                    ProjectId: 0,
                },
                tableData: [],
                totalLis: [],
                StartType: [],
                AllGasCards: [],
                AllVehicleAndok: [],
                sum: 0,
                bossSum: 0,
                wrapper: {
                    width: "100%",
                    height: "100%",
                    margin: "auto",
                },
                printObj: {
                    id: "wrapperGasolineRecordReport",  //打印标签的id
                    popTitle: '固远晨通科技发展有限公司油卡使用记录汇总表',  //文件标题
                    extraCss: 'http://www.guyuanct.com/',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                },
            }
        },
        created() {
            this.InitDate();
            publicjs.setecharts(Echatrs)
            this.init()
            this.formdata()
        },
        methods: {

            InitDate() {
                const endDate = this.getFormatDate(new Date()).substr(0, 11)
                const beginDate = this.getFormatDate(new Date(new Date() - 3600 * 1000 * 24 * 30)).substr(0, 11)
                this.selectfrom.Start = beginDate;
                this.selectfrom.End = endDate;
            },
            // 获取当前时间
            getFormatDate(date) {
                var month = date.getMonth() + 1
                var strDate = date.getDate()
                if (month >= 1 && month <= 9) {
                    month = '0' + month
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = '0' + strDate
                }
                var currentDate = date.getFullYear() + '-' + month + '-' + strDate + '';
                return currentDate
            },

            init() {
                this.AllGasCards = publicjs.GetAllGasCards(this.$http)//油卡信息
                this.AllVehicleAndok = publicjs.GetAllVehicleAndok(this.$http)
            },
            // 初始数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Report/GetAllGasCardsRecord', {
                    Start: this.selectfrom.Start,
                    End: this.selectfrom.End,
                    CardsId: this.selectfrom.CardsId,
                    ProjectId: this.selectfrom.ProjectId,
                }).then(res => {
                    loadding.close();
                    this.AllTById(res.data)
                    this.tableData = res.data
                    this.InitEchart(this.tableData)
                    this.asdasda()
                })
            },
            AllTById(data) {
                this.sum = 0;
                for (let j = 0; j < data.length; j++) {
                    data[j].ProjectName = this.GetProjectName(data[j].ProjectId)
                    this.GetGasCardsName(data[j])
                    for (let i = 0; i < this.AllGasCards.length; i++) {
                        if (data[j].GasCardsId == this.AllGasCards[i].Id) {
                            if (this.AllGasCards[i].ParentId != 0) {
                                this.sum += parseInt(data[j].TopUpRecord)
                            } else {
                                this.bossSum += parseInt(data[j].TopUpRecord)
                            }
                        }
                    }
                }
            },
            //获取对应项目名字
            GetProjectName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllProject.length; i++) {
                        if (this.AllProject[i].Id == value) {
                            name = this.AllProject[i].ProjectName
                            return name
                        }
                    }
                } else {
                    return '其他'
                }
            },
            //油卡记录
            GetGasCardsName(obj) {
                let name = 0
                console.log(obj.GasCardsId)
                if (obj.GasCardsId != 0) {

                    for (let i = 0; i < this.AllGasCards.length; i++) {
                        if (this.AllGasCards[i].Id == obj.GasCardsId) {
                            name = this.AllGasCards[i].CarId
                            break
                        }
                    }
                }
                if (name == 0) {
                    obj.GasCardsName = "固远晨通";
                    return
                }
                for (let i = 0; i < this.AllVehicleAndok.length; i++) {
                    if (this.AllVehicleAndok[i].Id == name) {
                        obj.GasCardsName = this.AllVehicleAndok[i].CareName
                        return
                    }
                }
            },
            // echarts表格加载
            InitEchart(data) {
                //按照部门分组统计
                var noRepeatDepartData = publicjs.DataGroupBy(JSON.stringify(data), "GasCardsName", "TopUpRecord");
                ////按照日期统计
                var noRepeatData = publicjs.DataGroupBy(JSON.stringify(data), "RecordDate", "TopUpRecord");
                var new_Date = noRepeatData.map(obj => { return obj.RecordDate; });
                var new_TopUpRecord = noRepeatData.map(obj => { return obj.TopUpRecord; });
                var new_DepartName = noRepeatDepartData.map(obj => { return obj.GasCardsName; });
                publicjs.InitEchartRender("downData", "充值时间", new_Date, new_TopUpRecord, new_DepartName);
                //去除主油卡
                for (var i = 0; i < noRepeatDepartData.length; i++) {
                    if (noRepeatDepartData[i].GasCardsId == "固远晨通") {
                        noRepeatDepartData.splice(i, 1)
                    }
                }
                var new_DepartName_ = noRepeatDepartData.map(obj => { return obj.GasCardsName; });
                var new_DepartData = noRepeatDepartData.map(obj => { return { name: obj.GasCardsName, value: obj.TopUpRecord }; });
                publicjs.InitEchartPie("leftData", "车辆金额占比", "单位：人民币（元）", new_DepartName_, "部门金额占比", new_DepartData);

                //按照项目分组统计
                var new_ProjectName = noRepeatDepartData.map(obj => { return obj.ProjectName });
                var new_ProjectData = noRepeatDepartData.map(obj => { return { name: obj.ProjectName, value: obj.TopUpRecord }; });
                new_ProjectData = this.dataName(new_ProjectData);
                publicjs.InitEchartPie("rightData", "项目金额占比", "单位：人民币（元）", new_ProjectName, "项目金额占比", new_ProjectData);
            },
            dataName(DataaArr) {
                if (DataaArr.length > 0) {
                    let valueDB = new Array();
                    let TopUpRecordSum = 0;
                    for (let i = 0; i < DataaArr.length; i++) {
                        if (DataaArr[i].name == "其他") {
                            TopUpRecordSum += parseInt(DataaArr[i].value);
                        } else {
                            valueDB.push(DataaArr[i]);
                        }
                    }
                    valueDB.push({ name: "其他", value: TopUpRecordSum });
                    return valueDB;
                }
            },
            asdasda() {
                let html = document.querySelectorAll('.has-gutter')
                if (html.length > 1) {
                    let newhtml = '<tr><td colspan="2" rowspan="1" class="el-table_1_column_1 is-center is-leaf"><div class="cell">合计充值（元）</div></td>' +
                        '<td colspan="3" rowspan="1" class="el-table_1_column_2 is-center is-leaf"><div class="cell">' +
                        '主油卡充值:' + this.bossSum + '   副油卡充值:' + this.sum
                    '</div></td></tr>'
                    html[html.length - 1].innerHTML = newhtml
                }
            },
        }
    }
</script>

<style scoped>
    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }

    #EchartData .bar {
        width: 100%;
        height: 500px;
    }

    #EchartData .pie {
        height: 500px;
    }
</style>
